<script setup>
import { computed, ref, watch } from 'vue';
import { useImageList } from '../../store/imgList';
import {onLoad} from'@dcloudio/uni-app'
import { wallpaperRate,downloadWallpaper } from '../../api';
const flag = ref(true)
//当前图片索引
const index = ref(0)

onLoad(options=>{
		index.value = parseInt(JSON.parse(options.deindex))
		console.log(index.value)
})
//pinia 图片列表
const list =useImageList().list

const change = (e) => {
	index.value=e.detail.current
	console.log("index:"+index.value);
}
//返回方法
const back = () =>{
	uni.navigateBack()
}

//下载
const download= async  () => {
try {
		let res = await downloadWallpaper({
			classid: list[index.value].classid ,
			wallid: list[index.value]._id
		});
		if(res.errCode != 0) throw res;			
		// #ifdef MP-WEIXIN || APP				
		uni.getImageInfo({
			src: list[index.value].picurl? list[index.value].picurl:list[index.value].smallPicurl,
			success: function(res) {					
				var path = res.path;
				uni.saveImageToPhotosAlbum({
					filePath: path,
					success(res) {
						uni.hideToast();
						uni.showToast({
							title: '保存成功,可去相册查看',
							icon: "none",
							duration:2000
						})							
					},
					fail(err) {
						uni.hideToast();
						if(err.errMsg == 'saveImageToPhotosAlbum:fail cancel'){
							uni.showToast({
								title: '保存失败，请重新点击下载',
								icon: "none"
							})
							return;
						}							
						uni.showModal({
							title: '提示',
							content: '需要您授权保存相册',
							showCancel: false,
							success:res=>{
								if(res.confirm){
									uni.openSetting({
										success(settingdata) {
											if (settingdata.authSetting['scope.writePhotosAlbum']) {
												uni.showToast({
													title:'获取权限成功',
													icon:"none"
												})													
											}else{
												uni.showToast({
													title:'获取权限失败',
													icon:"none"
												})													
											}
											
										}
									})
								}
							}
						})
					},
					complete(err) {
						
					}
				})
			}
		})
		// #endif

		// #ifdef H5
		//调用预览图片的方法		
		uni.previewImage({
			urls: [crtWallInfo.value.picurl],
			current: 0, //点击图片传过来的下标
			success: (res) => {
				uni.showToast({
					title: '请长按保存',
					icon: "none",
					duration: 2000
				})
			}
		})
		// #endif

	} catch (err) {			
		console.log(err);
		uni.hideLoading();
	}

}
//计算属性 
const time =computed(() => {
	const date1 = new Date()
	return date1.getHours()+":"+(date1.getMinutes()>=10? date1.getMinutes():"0"+date1.getMinutes())
})
const date = computed(() => {
	const date = new Date()
	return date.getMonth()+"月"+date.getDate()+"日"
})

const getid =computed(() => {
	return list[index.value]._id
})

const getauthor = computed(()=>{
	return list[index.value].nickname
})

const getRate = computed(()=> {
	return list[index.value].score
})

const getContnet = computed(() => {
	return list[index.value].description
})

const getTabs = computed(() => {
	return list[index.value].tabs.join(',')
})

//popup弹出框
const mypopup =  ref(null)
const popups = () => {
	mypopup.value.open('bottom')
}

const close = () => {
	mypopup.value.close()
}

const mypopup2 = ref(null)
const popups2 = () => {
	mypopup2.value.open('center')
}
const userRate = ref(0)

const postRate =  () => {
 wallpaperRate({
		classid: list[index.value].classid,
		wallId: list[index.value]._id,
		userScore: userRate.value
	})
	userRate.value = 0
	mypopup2.value.close()
}
</script>
<template>
	<swiper 
	@change="change"
	:current="index"
	 class="imgswiper" :circular="true" >
		<swiper-item 
		v-for="item in list" :key="item._id">
			<image @click="flag = !flag"
			class="img" :src="item.picurl? item.picurl:item.smallPicurl" mode="scaleToFill"></image>
		<view v-show="flag"  class="my-box">
			<view class="back" >
				<uni-icons @click="back" size="36" color="white"  type="back"/>
			</view>
			<view class="info">
				<view class="indx">
					<text>{{index+1}}/{{list.length}}</text>
				</view>
				<view class="time">
					<text>{{time}}</text>
				</view>
				<view class="date">
					<text>{{date}}</text>
				</view>
			</view>
			<view class="info2">
				<view class="info2-s" @click="popups">
					<uni-icons size="25" type="info" />
					<text>信息</text>
				</view>
				<view class="info2-s">
					<uni-icons size="25" type="star" @click="popups2"/>
					<text>评分</text>
				</view>
				<view class="info2-s">
					<uni-icons size="25" @click="download()" type="download" />
					<text>下载</text>
				</view>
			</view>
		</view>
		</swiper-item>
	</swiper>
	<uni-popup ref="mypopup" type="bottom" border-radius="10px 10px 0 0">
		<view class="infomation">
		<view class="text">
			<text style="color: rgb(200, 200, 200);margin: auto;">壁纸信息</text>
			<view style="background-color: rgba(121, 121, 121,0.6); border-radius: 50%;width: 40rpx;height: 40rpx;margin: 10rpx;"
			@click="close"> <text>X</text></view>
		</view>
		<view class="infomation-m">
			<view class="infomation-m-t">
				<text class="infomation-m-t-1">壁纸id:</text>
			<text style="margin-left: 25rpx;">{{getid}}</text>
			</view>
			<view class="infomation-m-t">
				<text class="infomation-m-t-1">发布者:</text>
			<text style="margin-left: 25rpx;">{{getauthor}}</text>
			</view>
			<view class="infomation-m-t" style="display: flex;">
				<text class="infomation-m-t-1">评分:</text>
				<uni-rate allow-half style="margin-left: 25rpx;" :value="getRate" size="20" readonly="true" />
			</view>
			<view class="infomation-m-t">
				<text class="infomation-m-t-1">摘要:</text>
			<text style="margin-left: 25rpx;">{{getContnet}}</text>
			</view>
			<view class="infomation-m-t">
				<text class="infomation-m-t-1">标签:</text>
			<text style="margin-left: 25rpx;color: #22aa62;">{{getTabs}}</text>
			</view>
		</view>
		</view>
		</uni-popup>
		
		<uni-popup ref="mypopup2" type="center">
			<view class="rate">
				<text>评分</text>
				<uni-rate allow-half style="margin-top: 50rpx;" v-model="userRate" :value="userRate" />
			<button @click="postRate"
			style="padding: 4rpx;line-height:40rpx;margin-top: 15rpx;" type="default" >提交</button>
			</view>
		</uni-popup>
</template>
	

<style lang="scss" scoped>
	.rate {
		width: 300rpx;
		height: 200rpx;
		background-color: white;
		border-radius: 15rpx;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.infomation-m {
		margin-top: 20rpx;
		padding: 30rpx;
	}
	.infomation-m-t {
		margin-top: 35rpx;
	}
	.infomation-m-t-1{
		color: rgba(190, 190,190, 0.8);
	}
	.text {
		width: 750rpx;
		height: 50rpx;
		color: rgba(121, 121, 121,0.6);
		text-align: center;
		display: flex;
		padding-right: 10rpx;
	}
	.infomation {
		background-color: white;
		width: 750rpx;
		height: 600rpx;
		border-radius: 15rpx;
	}
	.info2 {
		min-width: 350rpx;
		min-height: 100rpx;
		position: fixed;
		bottom: 200rpx;
		left: 175rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 10px;
		border-radius: 30rpx;
		background-color: rgba(254,254, 254, 0.5);
		.info2-s {
			text-align: center;
			margin-right:15rpx;
			display: flex;
			flex-direction: column;
		}
	}
	.info {
		color: white;
		position: fixed;
		top: 200rpx;
		left: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.indx {
			text-align: center;
			width: 100rpx;
			background-color:  rgba(129, 129, 129, 0.6) ;
			border-radius: 15rpx;
		}
		.time {
			font-size: 70px;
			font-weight: 200;
		}
		.date {
			min-width:100rpx ;
		}
	}
	.back {
		position: fixed;
		top: 55rpx;
		left: 50rpx;
		background-color: rgba(121, 121, 121,0.6);
		border-radius: 50%;
		box-shadow: 0 0 4rpx rgba(98, 98, 98, 0.8);
	}
	.imgswiper {
		width:750rpx;
		min-height: 1600rpx;
	}
	.img {
		position:fixed;  
		top: 0;  
		left: 0;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover; 
-o-background-size: cover;
background-position: center 0;
		}
</style>
